<template>
  <view v-if="show" class="modal-container">
    <view class="modal-content">
      <view class="modal-header">
        选择充电宝类型
        <button class="close-button" @click="closeModal">×</button>
      </view>
      <view class="modal-body">
        <view class="charge-rule">
          <text class="rule-title">计费规则</text>
          <text class="rule-content">普充宝：2元/小时，租借2分钟内免费归还，当日顶30元总封顶99元，押金99元，支持免押服务</text>
          <text class="rule-content">快充宝：1.5元/0.5小时，租借2分钟内免费归还，当日顶30元总封顶99元，押金99元，支持免押服务</text>
        </view>
        <button class="common-power-bank" @click="selectPowerBank('common')">
          普充宝
          <text class="rule">计费规则：1小时2元</text>
        </button>
        <button class="fast-power-bank" @click="selectPowerBank('fast')">
          快充宝
          <text class="rule">计费规则：0.5小时1.5元</text>
        </button>
      </view>
    </view>
  </view>
</template>

<script setup>
const props = defineProps({
  show: {
    type: Boolean,
    default: false
  }
});

const emit = defineEmits(['select', 'close']);

const selectPowerBank = (type) => {
  emit('select', type);
};

const closeModal = () => {
  emit('close');
};
</script>

<style lang="scss" scoped>
$primary-color: #4a90e2;
$secondary-color: #e24a4a;
$background-color: #f5f5f5;
$font-color: #fff;

.modal-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  background-color: #fff;
  border-radius: 10px;
  padding: 20px;
  width: 80%;
}

.modal-header {
  position: relative;
  text-align: center;
  font-size: 24px;
  margin-bottom: 20px;
}

.close-button {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
}

.modal-body {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.charge-rule {
  background-color: $background-color;
  padding: 15px;
  border-radius: 10px;
  margin-bottom: 20px;
  width: 100%;
}

.rule-title {
  font-weight: bold;
  margin-bottom: 10px;
}

.rule-content {
  margin-bottom: 10px;
}

button {
  width: 100%;
  margin: 10px 0;
  padding: 15px;
  border: none;
  border-radius: 10px;
  font-size: 18px;
  color: $font-color;
  display: flex;
  justify-content: center;
  align-items: center;

  &.common-power-bank {
    background-color: $primary-color;
  }

  &.fast-power-bank {
    background-color: $secondary-color;
  }

  .rule {
    display: block;
    font-size: 14px;
    margin-left: 10px;
  }
}
</style>
